<template>
	<view class="schedule-container">
		<view class="header-bg"></view>
		<!-- 头部说明 -->
		<view class="header">
			<view class="notice-wrap">
				<view class="left">
					<swiper
						style="text-align: center; height: 140rpx; z-index: -1"
						indicator-active-color="$uni-color-primary"
						indicator-color="rgba(51, 51, 51, 0.1)"
						:circular="true"
						:indicator-dots="true"
						:autoplay="true"
						:interval="3000"
						:duration="1000"
					>
						<swiper-item v-for="(item, index) in room.images" :key="index">
							<image
								:src="room.images"
								@click="homeSlidePreviewImage(index)"
								mode="heightFix"
							></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="right">
					<view class="title-wrap">
						<view class="">
							<view class="title">已消毒：{{ room.roomName }}</view>
							<view class="name">{{ storeName }}</view>
						</view>
						<view class="status" v-if="roomState == 1">空闲中</view>
						<view class="status" v-if="roomState == 5">使用中</view>
						<view class="status" v-if="roomState == 6">保洁中</view>
					</view>
				</view>
			</view>
			<view class="detail-desc">
				预定成功后，请按预约时间及时确认到店消费，若无法到店消费，可自主取消订单；预约时间到期前，可以自主续单延时，请提前规划好预约时段。
			</view>
		</view>

		<!-- 预定类别内容选择 -->
		<view class="body">
			<view class="schedule-mode-wrap">
				<view class="category" v-if="roomConfig.priceMode === 2">
					<view
						:class="['item', curIndex === index ? 'actived' : '']"
						v-for="(item, index) in category"
						:key="item.type"
						@click="onSelectMode(index)"
					>
						{{ item.text }}
					</view>
				</view>
				<view class="category-title" v-if="roomConfig.priceMode === 0">预定日期</view>

				<view class="category-title" v-if="roomConfig.priceMode === 1">选择套餐</view>
				<view
					class="category-detail"
					v-if="(curIndex === 0 && roomConfig.priceMode === 2) || roomConfig.priceMode === 0"
				>
					<view class="select-warp">
						<view class="date-picker">
							<view
								:class="['date-item', curDateIndex === index ? 'actived' : '']"
								v-for="(item, index) in selectOptions.defaultDayList"
								:key="index"
								@click="selectDay(item, index)"
							>
								<view class="date">{{ item.day }}</view>
								<view class="week">{{ item.week }}</view>
							</view>
						</view>
						<view class="hour-picker">
							<!-- <view class="label">时长选择:</view> -->
							<view class="hour-wrap">
								<view
									:class="['hour-item', curHourIndex === index ? 'actived' : '']"
									v-for="(item, index) in hourList"
									:key="index"
									@click="quickSelectHour(item.hour, index)"
								>
									{{ item.text }}
								</view>
							</view>
						</view>
						<view class="time-picker">
							<view class="label">时间选择:</view>
							<view class="time-wrap" @click="showDetail = true">
								<view class="time-item" style="display: flex;align-items: center;">{{ confirmInfo.defaultHourStart }} <uv-icon name="edit-pen" ></uv-icon></view>
								<view style="flex: 1; text-align: center">至</view>
								<view class="time-item">{{ confirmInfo.defaultHourEnd }}</view>
							</view>
						</view>
					</view>
					<!-- <view class="confirm-tip">
            预定成功后，请按预约时间及时确认到店消费，若无法到店消费，可自主取消订单；预约时间到期前，可以自主续单延时，请提前规划好预约时段。
          </view> -->
				</view>
				<view
					class="category-detail"
					v-if="(curIndex === 1 && roomConfig.priceMode === 2) || roomConfig.priceMode === 1"
				>
					<view class="date-picker">
						<view
							:class="['date-item', curDateIndex === index ? 'actived' : '']"
							v-for="(item, index) in selectOptions.defaultDayList"
							:key="index"
							@click="selectDay(item, index)"
						>
							<view class="date">{{ item.day }}</view>
							<view class="week">{{ item.week }}</view>
						</view>
					</view>
					<!-- 套餐 -->
					<view
						class="product-list"
						:class="{ selected: selectedIndex === index }"
						v-for="(product, index) in roomConfig.roomPackages"
						:key="index"
						@click="selectProduct(index)"
					>
						<view class="product-item" :class="{ selected: selectedIndex === index }">
							<view class="product-top">
								<view class="product-name">{{ product.packageName }}</view>
								<view class="product-price">¥{{ product.price / 100 }}/场</view>
								<!-- 其他产品顶部信息 -->
							</view>
							<view
								class="product-bottom"
								:class="{ selected: selectedIndex === index }"
								v-show="selectedIndex === index"
							>
								<!-- 产品底部详情信息 -->
								<!-- <p>
									<span>使用时间:</span>
									<span>{{ product.useTimeRemark }}</span>
								</p> -->
								<!-- <p>
									<span>有效时间</span>
									:
									<span>{{ product.validTimeRemark }}</span>
								</p> -->
								<p >
									<span>温馨提示</span>
									:
									<span>{{ product.remark }}</span>
								</p>
							</view>
						</view>
					</view>
					<!-- <view class="summary" v-if="selectedProduct">
						<view class="summary-quantity">
							<span class="summary-label">套餐数量:</span>
							<view class="price-container">
								<view class="minus-btn" @click="decrementQuantity()">-</view>
								<span class="summary-count">{{ quantity }}</span>
								<view class="plus-btn" @click="incrementQuantity()">+</view>
							</view>
						</view>
					</view> -->

					<div class="progress-bar-container" v-if="roomUsingEndTime">
						<div class="progress-bar-completed progress-text">
							{{ roomUsingStatus === 5 ? '使用中' : roomUsingStatus === 6 ? '清洁中' : '空闲中' }}:
						</div>
						<div class="progress-bar-remaining progress-text">{{ roomUsingEndTime }}结束</div>
					</div>
					<view class="time-picker" style="padding-top: 0">
						<view class="label" style="margin: 0 10px 0 0px">开始时间:</view>
						<TimePicker
							:startYear="currentDateTime"
							:startHour="currentStartHour"
							endYear="2050"
							:val="currentDateTime"
							@confirm="onDateTimeChange"
							ref="DatePicker"
						></TimePicker>
						<view @click="datePickerStart" style="display: flex;align-items: center;border:1rpx solid #ddd;height: 50rpx;padding: 0 10rpx;line-height: 50rpx;border-radius: 10rpx;">
							<text style="font-size: 28rpx" v-if="!selectedStartDate">请选择</text> 
							<text style="font-size: 28rpx" v-if="selectedStartDate">{{ selectedStartDate }}</text> <uv-icon name="edit-pen"></uv-icon>
						</view>
					</view>
					<view class="time-picker" style="padding-top: 0">
						<view class="label" style="margin: 0 10px 0 0px">结束时间:</view>
						<view style="display: flex;align-items: center;border:1rpx solid #ddd;height: 50rpx;padding: 0 10rpx;line-height: 50rpx;border-radius: 10rpx;">
							<text style="font-size: 28rpx" v-if="!selectedEndDate">请选择</text>
							<text style="font-size: 28rpx" v-if="selectedEndDate">{{ selectedEndDate }}</text>
						</view>
					</view>

					<!--          可预定时段、已预定时段-->
					<view class="schedule-time-label" style="font-size: 28rpx; margin-bottom: 10rpx">
						当前选择日期：{{ currentYearMonthDay }}
					</view>
					<view class="hour-flex-box">
						<view
							class="hour-item"
							v-for="(hourItem, index) in selectOptions.defaultOnlyHourList"
							v-if="currentYearMonthDay === hourItem.dayYmd"
							:key="index"
						>
							<view
								:class="[
									'hour-square',
									hourItem.disabled === 1
										? 'hour-square-red'
										: hourItem.disabled === 2
										? 'hour-square-blue'
										: ''
								]"
							></view>
							<view class="hour-num">{{ hourItem.hour }}</view>
						</view>
					</view>
					<!-- <view class="schedule-time-label" style="font-size: 28rpx; margin: 10rpx 0">
						当前选择明日日期：{{ tomorrow }}
					</view>
					<view class="hour-flex-box">
						<view
							class="hour-item"
							v-for="(hourItem, index) in selectOptions.defaultOnlyHourList"
							v-if="tomorrow === hourItem.dayYmd"
							:key="index"
						>
							<view
								:class="[
									'hour-square',
									hourItem.disabled === 1
										? 'hour-square-red'
										: hourItem.disabled === 2
										? 'hour-square-blue'
										: ''
								]"
							></view>
							<view class="hour-num">{{ hourItem.hour }}</view>
						</view>
					</view> -->
					<view class="hour-tip-flex-box">
						<view class="hour-tip-item">
							<view class="hour-square-red"></view>
							<view>不可预定时段</view>
						</view>
						<view class="hour-tip-item">
							<view class="hour-square"></view>
							<view>可预定时段</view>
						</view>
						<view class="hour-tip-item">
							<view class="hour-square-blue"></view>
							<view>当前预定时段</view>
						</view>
					</view>
				</view>
			</view>

			<view class="spare-time-wrap" style="display: none">
				<view class="spare-time">
					<view class="top">
						<view class="block-item" v-for="(item, index) in spareTimeDesc" :key="index">
							<view class="block" :style="{ background: item.color }"></view>
							<view>{{ item.text }}</view>
						</view>
					</view>
					<view class="middle">
						<view class="spare-time-map" v-for="item in spareTimeStatus" :key="item.date">
							<view class="date">{{ item.date }}</view>
							<view class="map-wrap">
								<view class="map" v-for="items in 24" :key="items">
									<view
										:class="['block', item.curSelectTime.includes(items) ? 'aaaa' : '']"
										:style="{
											background: item.curSelectTime.includes(items)
												? item.curColor
												: '' || item.selectableTime.includes(items)
												? item.selectColor
												: '' || item.disableTime.includes(items)
												? item.disableColor
												: ''
										}"
									></view>
									<view class="number">{{ items }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="order-detail-wrap">
				<view class="spare-time">
					<view class="title-wrap">
						<view class="title" style="font-size: 26rpx; color: #333">订单总价</view>
						<view class="total-price">¥{{ confirmInfo.totalPrice }}</view>
					</view>
					<view class="order-info-field">
						<view class="title">预约时长</view>
						<view class="info">{{ confirmInfo.hour }}小时</view>
					</view>
					<!-- <view class="order-info-field">
						<view class="title">团购券/优惠券</view>
						<view v-if="!selectedCoupon" class="value" style="color: orange" @click="handleShowCoupon">
							{{ couponList.length }}张可用>
						</view>
						<view v-if="selectedCoupon" class="value" style="color: orange" @click="handleShowCoupon">
							{{ selectedCoupon.voucherName }}
						</view>
					</view> -->
					<view class="order-info-field">
						<view class="title">优惠金额</view>
						<view class="info">{{ confirmInfo.discountAmount }}元</view>
					</view>
					<view class="order-info-field">
						<view class="title">开始时间</view>
						<view class="info">{{ confirmInfo.defaultHourStart }}</view>
					</view>
					<view class="order-info-field">
						<view class="title">结束时间</view>
						<view class="info">{{ confirmInfo.defaultHourEnd }}</view>
					</view>
					<!-- <view class="order-info-field">
						<view class="title">团购核销</view>
						<view class="value">
							<view
								class="coupon-input"
								style="display: flex; color: #1d2c6d"
								@click="goPage('/pages/tea/voucher/index?tabIndex=2')"
							>
								去核销>
							</view>
						</view>
					</view> -->
					<view class="order-info-field" v-if="couponInfo.title">
						<view class="title">美团券</view>
						<view class="info">{{ couponInfo.title }}</view>
					</view>
				</view>
			</view>
			<modal
				:show="wifiModal.show"
				@close="wifiModal.show = false"
				@cancel="wifiModal.show = false"
				:show-footer="false"
				:show-confirm="false"
				:show-cancel="false"
				confirm-text="确定"
				cancel-text="关闭"
			>
				<view  class="footModel"	style="">
					<div class="footModel-box"  style="">
						<view class="footModel-box-title" style="">
							预约信息确认
						</view>
						<view style="padding: 20rpx 0 10rpx;">
								预约门店：{{storeName}}
						</view>
						<view class="footModel-box-name">
								预约包间：{{room.roomName}}
						</view>
						<view class="footModel-box-name">
								开始时间：{{ confirmInfo.defaultHourStart}}
						</view>
						<view class="footModel-box-name">
								结束时间：{{confirmInfo.defaultHourEnd}}
						</view>
						<view class="footModel-box-name">
								预约时长：{{confirmInfo.hour}}小时
						</view>
						<view class="" style="padding: 30rpx 0 10rpx;font-weight: 700;font-size: 30rpx;color: #000;">
							预定须知：
						</view>
						<view class="footModel-box-text" style="">
							1、预定的订单将全时段保留。迟到不可顺延和退款;
						</view>
						<view class="footModel-box-text" >
							2、若订单时段前包厢无使用,可提前开始订单，但订单总时长不变;
						</view>
						<view class="footModel-box-text" >
							3、为避免包厢被其他用户预约而给您带来不好的体验，如需续单，请提前续单!
						</view>
						<view class="footModel-box-text" >
							4、订单开始前1小时内取消订单需核收15%退单费，请合理规划您的时间;
						</view>
						<view class="footModel-btn" style="">
							<view class="footModel-leftbtn" @click="wifiModal.show = false" style="">
								返回修改
							</view>
							<view class="footModel-rightbtn" @click="scenePay" style="">
								立即预定
							</view>
						</view>
						<!-- <Button class="open-control open-control-room" @click="connectWifi()">一键连接</Button> -->
					</div>
				</view>
			</modal>
			
			<view class="footer">
				<view class="buttons">
					<view class="price-info">
						<view class="price" style="">￥{{ (confirmInfo.totalPrice - confirmInfo.discountAmount).toFixed(2) }}</view>
						<view class="total-hours">/共{{ confirmInfo.hour }}小时</view>
					</view>
					<!-- @click="scenePay" -->
					<view class="button"  @click.stop="wifiModal.show = true">确认预约</view>
				</view>

				<view class="background-fix" v-if="showDetail" @click="showDetail = false"></view>
				<view class="appointment-select" v-if="showDetail">
					<view class="notice-title">时间选择</view>
					<view class="notice-tip">
						<image class="notice-image" src="../../../static/notice.png" />
						预订时间2小时起订，房间已打扫消毒
					</view>
					<div class="hour-tip-flex-box1">
						<view class="booking-btn">预定日期</view>
						<view class="hour-tip-info1">
							<div class="hour-tip-item1">
								<div class="hour-square-blue2"></div>
								<div>已被预定时段</div>
							</div>
							<div class="hour-tip-item1">
								<div class="hour-square-blue1"></div>
								<div>已预定时段</div>
							</div>
							<div class="hour-tip-item1">
								<div class="hour-square1"></div>
								<div>可预定时段</div>
							</div>
						</view>
					</div>
					<view class="date-select">
						<view
							class="date-select-item"
							@click="selectDay(defaultItem, index)"
							:class="{ current: defaultItem.selected ? true : false }"
							v-for="(defaultItem, index) in selectOptions.defaultDayList"
							:key="index"
						>
							<view class="month">{{ defaultItem.day }}</view>
							<view class="week">{{ defaultItem.week }}</view>
						</view>
						<!-- <view class="date-select-item" @click="selectCustomDay">
							<view class="month">
								<image src="../../../static/cal.png" class="cal-image"></image>
							</view>
							<view class="week">其它日期</view>
						</view> -->
					</view>
					<view class="hours">
						<view v-for="(defaultHour, index) in selectOptions.defaultHourList" v-if="!defaultHour.pass">
							<view
								v-if="!defaultHour.disabled"
								@click="selectHour(defaultHour)"
								class="hour"
								:class="{ current: defaultHour.selected ? true : false }"
							>
								<view style="margin-top: -6rpx">{{ getPrice(defaultHour.hour) }}元</view>
								<view style="font-size: 24rpx; margin-top: 6rpx">
									{{ defaultHour.hour + '-' + selectOptions.defaultHourList[index + 1].hour }}
								</view>
							</view>
							<view
								v-if="defaultHour.disabled"
								class="hour"
								:class="{ current: defaultHour.selected ? true : false }"
								style="background: #999"
							>
								<view style="margin-top: -6rpx">{{ getPrice(defaultHour.hour) }}元</view>
								<view style="font-size: 24rpx; margin-top: 6rpx">
									{{ defaultHour.hour + '-' + selectOptions.defaultHourList[index + 1].hour }}
								</view>
							</view>
						</view>
						<view class="hour" style="opacity: 0">
							<view style="margin-top: -6rpx"></view>
							<view style="font-size: 24rpx; margin-top: 6rpx"></view>
						</view>
						<view class="hour" style="opacity: 0">
							<view style="margin-top: -6rpx"></view>
							<view style="font-size: 24rpx; margin-top: 6rpx"></view>
						</view>
						<view class="hour" style="opacity: 0">
							<view style="margin-top: -6rpx"></view>
							<view style="font-size: 24rpx; margin-top: 6rpx"></view>
						</view>
					</view>
					<view class="select-buttons">
						<view class="close-button" @click="cencalSelect()">取消</view>
						<view class="confirm-button" @click="confirmSelect">确定({{ orderHour }}小时)</view>
					</view>
				</view>

				<w-picker
					:visible.sync="visible"
					mode="date"
					startYear="2021"
					endYear="2029"
					value="selectOptions.startDate"
					:current="true"
					fields="day"
					@confirm="onDateConfirm($event, 'date')"
					@cancel="onCancel"
					:disabled-after="false"
					ref="date"
				></w-picker>

				<modal
					:show="sceneConfirmDialog.show"
					@close="onSceneClose"
					@cancel="onSceneClose"
					@confirm="scenePay"
					:show-cancel="true"
					confirm-text="确定"
					cancel-text="关闭"
				>
					<view class="form-items scene-confirm-form">
						<!--
            <view class="form-item">
              <view class="form-title">当前时间:</view>
              <view class="form-value">2022-05-06 21:27</view>
            </view>
            -->
						<view class="form-item">
							<view class="form-title">预约:</view>
							<view class="form-value">
								<picker
									@change="onScenePickerChange"
									:value="sceneConfirmDialog.hourIndex"
									:range="sceneConfirmDialog.hourArr"
								>
									<view class="uni-input">
										{{ sceneConfirmDialog.hourArr[sceneConfirmDialog.hourIndex] }}小时
										<text style="color: #1d2c6d; margin-left: 20upx">请选择</text>
									</view>
								</picker>
							</view>
						</view>
						<view class="form-item">
							<view class="form-title">费用:</view>
							<view class="form-value">{{ (sceneConfirmDialog.hour * roomConfig.price) / 100 }}元</view>
						</view>
						<view class="form-item" v-if="couponInfo.title">
							<view class="form-title">优惠券:</view>
							<view class="form-value">
								{{ couponInfo.title }}
							</view>
						</view>
					</view>
				</modal>

				<view class="coupon">
					<view :class="{ 'coupon-box': couponState }" @click="handleHiddenCoupon"></view>
					<view class="coupon-item" :class="{ 'coupon-show': couponState }">
						<view class="coupon-to">
							<text>选择优惠券</text>
						</view>
						<view class="content">
							<view
								v-if="couponList.length > 0"
								class="block"
								v-for="(item, index) in couponList"
								:key="index"
								@click="selectCoupon(item)"
							>
								<image
									src="../../../static/coupon_icon.png"
									mode="aspectFill"
									class="coupon-icon"
								></image>
								<view class="coupon-desc">
									<view class="coupon-name">{{ item.voucherName }}</view>
									<view style="display: flex" v-if="item.times && item.usedTimes">
										<view class="coupon-times">剩余{{ item.times }}次</view>
										<view class="coupon-used">已用{{ item.usedTimes }}次</view>
									</view>
									<view class="coupon-validity">
										{{
											filterTime(item.validityTimeStart) + '至' + filterTime(item.validityTimeEnd)
										}}
									</view>
								</view>
							</view>
							<view
								v-if="couponList.length == 0"
								style="
									text-align: center;
									padding: 10px;
									width: 100%;
									color: lightgray;
									font-size: 14px;
								"
							>
								暂无可用优惠券
							</view>
						</view>
						<view class="cancel" @click.stop="handleHiddenCoupon">
							<text>取消</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/libs/util.js';
import globalConfig from '../../../config';
const baseHttp = globalConfig.API_HOST;
//import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
import wPicker from '@/components/w-picker/w-picker.vue';
import Modal from '@/components/neil-modal/neil-modal.vue';
import MyTabs from '@/components/my-tabs.vue';
import TimePicker from '@/components/DatePicke/TimePicker';
export default {
	data() {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1; // 月份是从0开始的，所以需要+1
		const day = now.getDate();
		const hours = now.getHours();
		const minutes = now.getMinutes();
		const seconds = now.getSeconds();

		// 设置初始值为当前时间，格式为 YYYY-MM-DD HH:mm:ss
		const currentDateTime = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ${
			hours < 10 ? '0' + hours : hours
		}:${minutes < 10 ? '0' + minutes : minutes}`;
		const currentYearMonthDay = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
		const currentYearMonth = `${year}-${month < 10 ? '0' + month : month}`;
		const currentHourMinute = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
		const currentHour = `${hours < 10 ? '0' + hours : hours}`;
		const currentHourNumber = hours;

		// 设置可选时间的范围（可选）
		const packageStartDate = '2000-01-01 00:00:00'; // 最早可选时间
		const endDate = '2100-12-31 23:59:59'; // 最晚可选时间
		return {
			wifiModal: {
				show: false,
				wifiAccount: '',
				wifiPassword: '88888888'
			},
			defaultItem:{},
			currentDateTime, // 初始值为当前时间
			currentYearMonth, // 初始值为当前时间
			currentYearMonthDay, // 初始值为当前时间
			currentHourMinute, // 初始值为当前时间
			currentHour, // 初始值为当前时间
			currentHourNumber, // 初始值为当前小时
			packageStartDate, //套餐开始时间
			endDate,
			selectedStartDate: '',
			setedStartIndex: '',
			roomOrderTimes: [],
			currentStartHour: currentHourNumber,
			mtCode: '',
			roomState: 0,
			/*tab: {
        curIndex: 0,
        items: [
          {value:0,label:'小时模式'},
          {value:1,label:'套餐模式'},
        ]
      },*/
			// 模式选择
			category: [
				{
					text: '小时模式',
					type: 'hour'
				},
				{
					text: '套餐模式',
					type: 'combo'
				}
			],
			notFinishedTimes1: [
				{
					num: 0,
					checked: true
				},
				{
					num: 1,
					checked: true
				},
				{
					num: 2,
					checked: true
				},
				{
					num: 3,
					checked: true
				},
				{
					num: 4,
					checked: true
				},
				{
					num: 5,
					checked: true
				},
				{
					num: 6,
					checked: true
				},
				{
					num: 7,
					checked: true
				},
				{
					num: 8,
					checked: true
				},
				{
					num: 9,
					checked: true
				},
				{
					num: 10,
					checked: true
				},
				{
					num: 11,
					checked: false
				},
				{
					num: 12,
					checked: false
				},
				{
					num: 13,
					checked: false
				},
				{
					num: 14,
					checked: false
				},
				{
					num: 15,
					checked: false
				},
				{
					num: 16,
					checked: false
				},
				{
					num: 17,
					checked: false
				},
				{
					num: 18,
					checked: false
				},
				{
					num: 19,
					checked: false
				},
				{
					num: 20,
					checked: false
				},
				{
					num: 21,
					checked: false
				},
				{
					num: 22,
					checked: false
				},
				{
					num: 23,
					checked: false
				}
			],
			notFinishedTimes: [
				{
					num: 0,
					checked: true
				},
				{
					num: 1,
					checked: true
				},
				{
					num: 2,
					checked: true
				},
				{
					num: 3,
					checked: true
				},
				{
					num: 4,
					checked: true
				},
				{
					num: 5,
					checked: true
				},
				{
					num: 6,
					checked: true
				},
				{
					num: 7,
					checked: true
				},
				{
					num: 8,
					checked: true
				},
				{
					num: 9,
					checked: true
				},
				{
					num: 10,
					checked: true
				},
				{
					num: 11,
					checked: false
				},
				{
					num: 12,
					checked: false
				},
				{
					num: 13,
					checked: false
				},
				{
					num: 14,
					checked: false
				},
				{
					num: 15,
					checked: false
				},
				{
					num: 16,
					checked: false
				},
				{
					num: 17,
					checked: false
				},
				{
					num: 18,
					checked: false
				},
				{
					num: 19,
					checked: false
				},
				{
					num: 20,
					checked: false
				},
				{
					num: 21,
					checked: false
				},
				{
					num: 22,
					checked: false
				},
				{
					num: 23,
					checked: false
				}
			],
			selectedQuantity: 0,
			totalPrice: 0,
			selectedProduct: null,
			selectedIndex: null,
			quantity: 1,
			// 套餐
			products: [
				{
					name: '清新中包4小时',
					price: 79,
					hours: 4,
					useTime: '全天',
					validTime: '周一至周日',
					tips: '温馨提示，套餐只能在指定的日期、时间内使用'
				},
				{
					name: '清新中包6小时',
					price: 119,
					hours: 6,
					useTime: '全天',
					validTime: '周一至周日',
					tips: '温馨提示，套餐只能在指定的日期、时间内使用'
				},
				{
					name: '清新中包8小时',
					price: 159,
					hours: 8,
					useTime: '全天',
					validTime: '周一至周日',
					tips: '温馨提示，套餐只能在指定的日期、时间内使用'
				}
			],
			curIndex: 0,
			// 当前日期索引,默认今天
			curDateIndex: 0,
			// 当前时长索引,默认4小时
			curHourIndex: 0,
			hourList: [
				{
					text: '2h',
					hour: 2
				},
				{
					text: '3h',
					hour: 3
				},
				{
					text: '4h',
					hour: 4
				},
				{
					text: '5h',
					hour: 5
				},
				{
					text: '6h',
					hour: 6
				},
				{
					text: '7h',
					hour: 7
				},
				{
					text: '8h',
					hour: 8
				},
				{
					text: '9h',
					hour: 9
				}
			],
			// 当前选择的时长
			hour: 0,
			// 时段说明
			spareTimeDesc: [
				{
					text: '当前选择时段',
					color: '#1D2C6D'
				},
				{
					text: '可选时段',
					color: '#fff'
				},
				{
					text: '不可选时段',
					color: '#ffeb3b'
				}
			],
			// 当前时间列表
			curTime: '00:00',
			fetureTime: '00:00',
			// 时段状态
			spareTimeStatus: [
				{
					date: '2023-04-21',
					curSelectTime: [0, 1, 2, 3, 4, 5, 6, 7, 8],
					selectableTime: [9, 16],
					disableTime: [18, 19, 20, 21, 22, 23],
					curColor: '#1D2C6D',
					selectColor: '#fff',
					disableColor: '#ffeb3b'
				},
				{
					date: '2023-04-22',
					curSelectTime: [17, 18, 19, 20],
					selectableTime: [21, 22, 23],
					disableTime: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
					curColor: '#1D2C6D',
					selectColor: '#fff',
					disableColor: '#ffeb3b'
				}
			],
			couponState: false,
			selectedCoupon: null,
			couponList: [],
			sceneConfirmDialog: {
				show: false,
				hour: 2,
				hourIndex: 0,
				hourArr: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				totalPrice: 0.0
			},
			orderConfirmDailog: {
				show: false
			},
			showDetail: false,
			showPicker: false,
			date: '2019/01/01',
			time: '15:00:12',
			value: '',
			currentDay: '',
			maxHour: 0,
			confirmInfo: {
				startYear: '',
				startDate: '',
				defaultHourStart: '',
				defaultHourEnd: '',
				hour: 0,
				discountAmount: 0,
				totalPrice: 0
			},
			dayTimeJson: {},
			bookedTimeJson: [],
			roomUsingStatus: '',
			roomUsingEndTime: '',
			selectOptions: {
				startDate: '',
				defaultDayList: [],
				defaultHourStart: '',
				defaultHourEnd: '',
				defaultOnlyHourList: [],
				defaultHourList: []
			},
			baseHttp: baseHttp,
			teaHouseId: '',
			roomId: '',
			showCount: 0,
			orderHour: 0,
			map: {},
			user: {
				level: 0
			},
			isUseCoupon: false,
			couponInfo: {
				code: '',
				price: 0,
				time: 0,
				title: '',
				type: ''
			},
			groupVoucherInfo: {},
			room: {
				roomId: '', //包厢id
				teamhouseId: '', //茶室id
				roomType: '', //包厢类型（预留）
				roomLevel: '', //包厢等级（预留）
				roomState: '', //包厢状态
				roomNO: '', //包厢编号
				roomName: '', //包厢名称
				images: '', //包厢图片
				updateTime: '', //更新时间
				remark: '', //备注
				orderUserId: '', //预约用户ID
				orderTime: '' //预约时间
			},
			groupVoucherNo: '',
			timeIntervalDiscountJSON: {},
			storeName: '',
			roomConfig: {
				roomId: '', //包厢id
				price: '', //包厢租用单价（分）每小时
				priceMode: 0, //计价模式 0-小时模式  1-套餐模式 2-都支持
				roomPackages: [], //套餐列表
				vipPrice: '', //会员包厢租用单价（分）每小时
				lockerPrice: '', //储物柜租用单价（分）每小时
				freeOrderTime: '', //免费预约时间（分）
				remark: '' //备注
				/*
        deposit: "",
        vipMoney: "",
        money: "",
        superVipTimes: "",
        subMemberLimit: "",
        remark: ""
        */
			},
			listData: {
				items: []
			}
		};
	},
	onLoad(params) {
		this.roomId = params.roomId;
		this.mtCode = params.mtCode;
		this.roomState = params.roomState;
		this.storeName = params.storeName;
		if (this.mtCode == 'undefined') {
			this.mtCode = '';
		}
	},
	onShow() {
		this.init();
	},
	components: {
		//MxDatePicker
		wPicker,
		TimePicker,
		Modal,
		MyTabs
	},
	watch: {
		selectedStartDate(newCount, oldCount) {
			// 监听 count 的变化
			console.log('selectedStartDate 变化了', newCount);
			this.confirmInfo.defaultHourStart = newCount;
			this.confirmInfo.defaultHourEnd = this.selectedEndDate;
		},
		selectedProduct() {
			this.confirmInfo.defaultHourEnd = this.selectedEndDate;
		}
	},
	computed: {
		userSelectedStartDate() {},
		selectedEndDate() {
			if (this.quantity > 0 && this.selectedStartDate && this.selectedProduct && this.selectedProduct.hours) {
				return util.addHoursToCurrentTime(this.selectedStartDate, this.selectedProduct.hours * this.quantity);
			}
		},
		youCanBookingHourIndex() {
			// let indx = this.curDateIndex === 0 ? this.currentHourNumber - 1 : this.curDateIndex * 24;
			let indx = this.curDateIndex === 0 ? this.currentHourNumber - 1 : this.curDateIndex * 24;
			console.log('indx', indx);
			console.log('this.currentHourNumber', this.currentHourNumber);
			console.log('curDateIndex', this.curDateIndex);
			console.log('curDateIndex', this.selectOptions.defaultOnlyHourList);
			
			return util.findConsecutiveArrayIndex(this.selectOptions.defaultOnlyHourList, indx, this.confirmInfo.hour);
		},
		tomorrow() {
			if (this.curDateIndex === 4) {
				return '';
			}
			return util.addDay(this.currentYearMonthDay, 1);
		},
		dateList() {
			return util?.getFetureDay?.(5);
		}
	},
	methods: {
		...util,
		init() {
			uni.showLoading({
				title: '加载中，请稍后'
			});
			let page = this;
			const date = new Date();
			const year = date.getFullYear();
			page.confirmInfo.startYear = year;
			this.getCurrentDate();
			this.getRoomDetail(this.roomId);
		},
		//开始设置起始时间
		datePickerStart() {
			if (!this.selectedProduct) {
				this.$Message.info('请选择套餐');
				return;
			}
			if (this.selectedStartDate == '') {
				this.selectedStartDate = this.currentDateTime;
			}
			this.$refs.DatePicker.show(this.currentStartHour);
		},
		initTime() {
			if (!this.selectedStartDate || this.selectedStartDate === '') {
				//如果当前时间开始可以连续设置套餐的数量，那么就从当前时间开始预订
				console.log('this.currentHourNumber', this.currentHourNumber,this.youCanBookingHourIndex);
				if (this.currentHourNumber === this.youCanBookingHourIndex) {
					this.selectedStartDate = this.currentDateTime;
					console.log(this.selectedStartDate,111111);
				} else {
					//否则以能连续设置满足套餐的起始时间开始
					this.selectedStartDate =
						this.selectOptions.defaultOnlyHourList[this.youCanBookingHourIndex].dayYmdhm;
						console.log(this.selectedStartDate,2222);
				}
			}
		},
		//时间选择器时间滚动时
		onDateTimeChange(value) {
			console.log('时间选择： ', value);
			if (util.compareTime(this.currentYearMonthDay + ' ' + value, this.currentDateTime) < 0) {
				console.log('时间选择1： ', value);
				this.$Message.info('开始时间不能小于当前时间');
				return;
			}
			let setStartIndex = 24 * this.curDateIndex + parseInt(value.split(':')[0]);
			console.log('时间选择2： ', value);
			let isSucc = util.setConsecutiveArrays(
				this.selectOptions.defaultOnlyHourList,
				setStartIndex,
				this.confirmInfo.hour
			);
			if (!isSucc) {
				this.$Message.info('当前时段已被预约，请选择其他时间段');
				console.log('时间选择3： ', value);
				return;
			}
			if (setStartIndex < this.youCanBookingHourIndex) {
				this.selectedStartDate = this.selectOptions.defaultOnlyHourList[this.youCanBookingHourIndex].dayYmdhm;
			} else {
				this.selectedStartDate = this.currentYearMonthDay + ' ' + value;
			}
		},
		/*选择套餐*/
		selectProduct(index) {
			console.log(index,'选择套餐');
			this.selectedIndex = index;
			this.selectedProduct = this.roomConfig.roomPackages[index];
			this.confirmInfo.totalPrice = (this.selectedProduct.price / 100).toFixed(2);
			console.log(this.selectedProduct.price/100,this.confirmInfo.totalPrice,'755');
			this.confirmInfo.hour = this.selectedProduct.hours;
			this.quantity = 1;
			this.orderHour = this.selectedProduct.hours;
			this.initTime();
			let succIndexStart = util.setConsecutiveArrays(
				this.selectOptions.defaultOnlyHourList,
				this.youCanBookingHourIndex,
				this.confirmInfo.hour
			);
			console.log(this.selectOptions.defaultOnlyHourList,
				this.youCanBookingHourIndex,
				this.confirmInfo.hour,'wqadasdas');
			succIndexStart=succIndexStart<10?'0'+succIndexStart:succIndexStart
			console.log(succIndexStart,'999');
			if (succIndexStart === -1) {
				this.$Message.info('当前时段已被预约，请选择其他时间段');
				return;
			} else {
				let yMd = this.selectedStartDate.split(' ')[0];
				console.log(yMd);
				let hm = this.selectedStartDate.split(' ')[1];
				let h = hm.split(':')[0];
				let m = hm.split(':')[1];
				// this.selectedStartDate = yMd + ' ' + succIndexStart + ':' + m;
				this.selectedStartDate = yMd + ' ' + this.selectOptions.defaultOnlyHourList[succIndexStart].hour + ':' + m;
				
				this.confirmInfo.defaultHourStart = this.selectedStartDate;
				this.confirmInfo.defaultHourEnd = this.selectedEndDate;
				console.log(this.selectedStartDate,succIndexStart,'88888');
			}
		},
		// 增加套餐
		incrementQuantity() {
			if (this.selectedProduct) {
				this.quantity++;
				this.confirmInfo.totalPrice =
					(Number(this.confirmInfo.totalPrice) + Number(this.selectedProduct.price / 100)).toFixed(2)
				this.confirmInfo.hour += this.selectedProduct.hours;
				this.orderHour = this.confirmInfo.hour;
				this.initTime();
				let succIndexStart = util.setConsecutiveArrays(
					this.selectOptions.defaultOnlyHourList,
					this.youCanBookingHourIndex,
					this.confirmInfo.hour
				);
				if (succIndexStart === -1) {
					this.$Message.info('当前无空闲时间段');
					return;
				} else {
					let yMd = this.selectedStartDate.split(' ')[0];
					let hm = this.selectedStartDate.split(' ')[1];
					let h = hm.split(':')[0];
					let m = hm.split(':')[1];
					this.selectedStartDate = yMd + ' ' + succIndexStart + ':' + m;
				}
			}
		},
		// 减去套餐
		decrementQuantity() {
			if (this.selectedProduct) {
				if (this.quantity === 1) {
					this.$Message.info('套餐数量不能小于1');
					return;
				}
				this.quantity--;
				this.confirmInfo.totalPrice =
					(Number(this.confirmInfo.totalPrice) - Number(this.selectedProduct.price / 100)).toFixed(2);
				this.confirmInfo.hour -= this.selectedProduct.hours;
				this.orderHour = this.confirmInfo.hour;
				this.initTime();
				let succIndexStart = util.setConsecutiveArrays(
					this.selectOptions.defaultOnlyHourList,
					this.youCanBookingHourIndex,
					this.confirmInfo.hour
				);
				if (succIndexStart === -1) {
					this.$Message.info('当前无空闲时间段');
					return;
				} else {
					let yMd = this.selectedStartDate.split(' ')[0];
					let hm = this.selectedStartDate.split(' ')[1];
					let h = hm.split(':')[0];
					let m = hm.split(':')[1];
					this.selectedStartDate = yMd + ' ' + succIndexStart + ':' + m;
				}
				// this.quickSelectHour(this.confirmInfo.hour, this.hourList.findIndex(hour => hour.hour === this.confirmInfo.hour))
			}
		},
		scanItem() {
			uni.scanCode({
				success: (res) => {
					if (res.result) {
						this.groupVoucherNo = res.result;
						this.checkVoucher();
					} else {
						this.$Message.error('识别失败');
					}
				}
			});
		},

		homeSlidePreviewImage(index) {
			let imgs = this.room.images.split(',').map((item) => {
				return baseHttp + '/image/getByImageId?imageId=' + item;
			});
			uni.previewImage({
				urls: imgs,
				current: index
			});
		},

		checkVoucher() {
			if (this.groupVoucherNo) {
				this.$api
					.post('/mtconfig/getCodeInfo', {
						code: this.groupVoucherNo
					})
					.then((response) => {
						if (response.ret === 1) {
							this.mtCode = this.groupVoucherNo;
							this.couponState = true;
							this.getCouponInfo();
						} else {
							this.$Message.error(response.msg);
						}
					});
			} else {
				this.$Message.error('请输入团购码');
			}
		},

		// 选择模式
		onSelectMode(index) {
			console.log(index,66);
			// this.confirmInfo= {
			// 	startYear: '',
			// 	startDate: '',
			// 	defaultHourStart: '',
			// 	defaultHourEnd: '',
			// 	hour: 0,
			// 	discountAmount: 0,
			// 	totalPrice: 0
			// },
			this.curIndex = index;
			// this.selectDay(this.selectOptions.defaultDayList[0], 0);
			if(index==0){
				// this.init();
				// this.getCurrentDate();
				this.quickSelectHour(2,0)
				// this.selectedIndex= null
				
			}else{
				// this.selectDay(this.defaultItem,this.curDateIndex)
				this.selectProduct(0)
			}
		},

		// 显示优惠券
		handleShowCoupon() {
			if (!this.mtCode) {
				this.couponState = true;
			}
		},
		// 隐藏优惠券
		handleHiddenCoupon() {
			this.couponState = false;
		},
		getPrice(hour) {
			var item = this.timeIntervalDiscountJSON[hour];
			if (item) {
				if (item.discountType == 1 && item.discountValue < 10) {
					return ((item.discountValue * this.roomConfig.price) / 100 / 10 / 2).toFixed(2);
				} else if (item.discountType == 2 && item.discountValue > 0) {
					return ((this.roomConfig.price / 100 - item.discountValue) / 2).toFixed(2);
				} else {
					return this.roomConfig.price / 100 / 2;
				}
			} else {
				return this.roomConfig.price / 100 / 2;
			}
		},
		selectCoupon(coupon) {
			//选择优惠券
			this.couponState = false;
			var totalAmt = this.roomConfig.price * this.confirmInfo.hour;
			console.log('price', this.roomConfig.price);
			console.log('hour', this.roomConfig.hour);
			console.log('totalAmt', totalAmt);
			console.log('coupon', coupon);
			if (
				coupon.voucherType == 1 ||
				coupon.voucherType == 4 ||
				coupon.voucherType == 5 ||
				coupon.voucherType == 6
			) {
				this.confirmInfo.discountAmount = (((coupon.voucherValue / 100) * this.roomConfig.price) / 100).toFixed(
					2
				);
			} else if (coupon.voucherType == 2) {
				this.confirmInfo.discountAmount = (
					(totalAmt - (coupon.voucherValue / 100 / 10) * totalAmt) /
					100
				).toFixed(2);
			} else if (coupon.voucherType == 3) {
				if (totalAmt < coupon.lessValue) {
					this.$Message.error('满' + coupon.lessValue / 100 + '元可用！');
					return;
				}
				this.confirmInfo.discountAmount = (coupon.voucherValue / 100).toFixed(2);
			}
			if (this.confirmInfo.discountAmount > totalAmt / 100) {
				this.confirmInfo.discountAmount = totalAmt / 100;
			}
			this.confirmInfo.couponId = coupon.id;
			this.selectedCoupon = coupon;
		},
		// 获取优惠券列表
		getCardAndVoucher() {
			this.$api.post('/user/voucher/getUserVoucher', {}).then((response) => {
				console.log('=======================函数3=====================================');
				if (response.ret === 1) {
					let page = this;
					page.couponList = response.data;
					console.log('this.couponList===================');
					//默认选中的小时数
					var quickSelectHourTimeLong = 4;
					if ((this.curIndex === 1 && this.roomConfig.priceMode === 2) || this.roomConfig.priceMode === 1) {
						//套餐模式默认4小时
						quickSelectHourTimeLong = 4;
					} else {
						//非套餐模式默认2小时
						quickSelectHourTimeLong = 2;
					}

					var useGroupCoupon = false;
					page.couponList.forEach(function (coupon) {
						if (coupon.giveType == 6) {
							quickSelectHourTimeLong = coupon.voucherValue / 100;
							useGroupCoupon = true;
							page.selectCoupon(coupon);
							page.hourList.forEach(function (item, index) {
								if (item.hour == quickSelectHourTimeLong) {
									page.curHourIndex = index;
								}
							});
						}
					});

					setTimeout(function () {
						uni.hideLoading();
						// page.quickSelectHour(quickSelectHourTimeLong);
					}, 2000);
				}
			});
		},
		getCouponInfo() {
			if (this.mtCode && this.mtCode != 'undefined') {
				this.$api
					.post('/mtconfig/getCodeInfo', {
						code: this.mtCode
					})
					.then((response) => {
						if (response.ret === 1) {
							this.couponInfo = response.data;
						} else {
							this.$Message.error(response.msg);
						}
					});
			} else {
				//this.$Message.error("请输入团购码");
			}
		},
		scenePay() {
			let timestamp = Date.parse(new Date());
			timestamp = timestamp / 1000 + 10;
			let currentDate = this.timeToDate(timestamp); //当前时间
			let hour = this.confirmInfo.hour;
			if ((this.curIndex === 1 && this.roomConfig.priceMode === 2) || this.roomConfig.priceMode === 1) {
				this.toPay(currentDate);
			} else {
				this.toPay(currentDate, hour, (hour * this.roomConfig.price) / 100);
			}
		},
		onScenePickerChange(e) {
			//场景
			this.sceneConfirmDialog.hourIndex = e.detail.value;
			this.sceneConfirmDialog.hour = this.sceneConfirmDialog.hourArr[e.detail.value];
		},
		onTabChange(value) {
			console.log(value);
			this.tab.current = value;
		},
		onSceneClose() {
			this.sceneConfirmDialog.show = false;
			this.$refs.typeTabs.setCurrent(0);
		},
		checkCurrentHour() {
			let startTime = parseInt(new Date().valueOf() / 1000);
			let currentDay = this.timeToDay(startTime);
			if (currentDay == this.selectOptions.startDate) {
				let date = new Date();
				let hour = date.getHours();
				let minutes = date.getMinutes();
				if (minutes < 15) {
					this.maxHour = hour * 60;
				} else if (minutes >= 15 && minutes < 45) {
					this.maxHour = hour * 60 + 30;
				} else if (minutes >= 45 && minutes <= 59) {
					this.maxHour = (hour + 1) * 60;
				}
			} else {
				this.maxHour = 0;
			}
		},
		onCancel() {},

		filterTime(time) {
			const date = new Date(time);
			const Y = date.getFullYear();
			const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			const D = date.getDate();
			return `${Y}-${M}-${D}`;
		},

		toPay(startDate, hour, totalPrice) {
			let payTotalPrice = 0.0;
			if (totalPrice) {
				payTotalPrice = totalPrice;
			} else {
				payTotalPrice = this.confirmInfo.totalPrice;
			}

			if (payTotalPrice <= 0) {
				this.$Message.error('请选择时长或套餐');
				return false;
			}
			payTotalPrice = payTotalPrice - this.confirmInfo.discountAmount;
			wx.login({
				success: (res) => {
					if (res.code) {
						let wxCode = res.code;
						let payStartDate = '';
						let payHour = '';
						let packageId = '';

						//套餐模式
						if (!hour && this.selectedProduct && this.selectedProduct.packageId) {
							packageId = this.selectedProduct.packageId;
						}

						if (startDate) {
							payStartDate = startDate;
						} else {
							payStartDate =
								this.confirmInfo.startYear +
								'-' +
								this.confirmInfo.defaultHourStart.replace('月', '-').replace('日', '') +
								':00';
						}
						// TODO 确认规则
						payStartDate =
							this.confirmInfo.startYear +
							'-' +
							this.confirmInfo.defaultHourStart.replace('月', '-').replace('日', '') +
							':00';
						if (this.selectedStartDate) {
							payStartDate = this.selectedStartDate + ':00';
						}
						if (hour) {
							payHour = hour;
						} else {
							payHour = this.confirmInfo.hour;
						}

						//判断选择时间一段，要跟团购券一样
						//this.couponInfo.code;
						if (this.couponInfo.code) {
							let couponInfoHour = this.couponInfo.time;
							if (couponInfoHour != payHour) {
								this.$Message.error('选择时长需要跟团购券时长一致');
								return false;
							}
						}

						//mtCode
						let payParams = {
							code: wxCode,
							roomId: this.roomId,
							startTime: payStartDate, // "2021-12-26 18:00:00",
							hours: payHour,
							packageId: packageId, //套餐id
							mtCode: this.mtCode,
							couponId: this.confirmInfo.couponId
						};
						console.log(JSON.stringify(payParams));
						uni.showLoading({
							title: '预约中，请稍后'
						});
						this.$api.post('/roomOrder/roomOrder', payParams).then((response) => {
							uni.hideLoading();
							if (response.ret === 1) {
								if (response.data === null || response.data === undefined || response.data === 'ok') {
									//会员支付成功
									//this.$Message.success("支付成功");

									this.goPage('/pages/tea/default/paySuccess');
								} else {
									let json = '{' + response.data + '}';
									json = json.replace(/'/g, '"');
									json = JSON.parse(json);

									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: json.timeStamp,
										nonceStr: json.nonceStr,
										package: json.package,
										signType: json.signType,
										paySign: json.paySign,
										success: (res) => {
											this.goPage('/pages/tea/default/paySuccess');
										},
										fail: function (err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
								}
							} else {
								if (
									(response.data === null || response.data === undefined) &&
									response.msg == '会员费不足，请充值'
								) {
									//"msg":"会员费不足，请充值"
									this.$Message.error(response.msg);

									setTimeout(() => {
										this.goPage('/pages/user/info/vip');
									}, 2000);
								} else if (
									(response.data === null || response.data === undefined) &&
									response.msg == '余额不足，请先充值'
								) {
									this.$Message.error(response.msg);
									setTimeout(() => {
										this.goPage('/pages/user/info/vip?teaHouseId=' + this.room.teaHouseId);
									}, 2000);
								} else {
									this.$Message.error(response.msg);
								}
							}
						});
					}
				}
			});
		},
		confirmOrder() {
			if (this.confirmInfo.hour == 0) {
				this.$Message.info('请选择预约时间');
			} else if (this.confirmInfo.hour == 1) {
				this.$Message.info('4小时起订');
			} else {
				this.orderConfirmDailog.show = true;

				if (this.couponList.length > 0) {
					if (!this.mtCode) {
						this.couponState = true;
					}
				}
			}
		},
		cencalSelect(){
			this.showDetail = false
			this.quickSelectHour(2,0)
		},
		
		confirmSelect() {
			let orderHourFloor = Math.floor(this.orderHour);
			let calItem = this.orderHour - orderHourFloor;
			let confirmHour = this.calHour('select');
			
			if (calItem == 0.5) {
				this.$Message.info('预约小时必须为整数');
				return
			} else if (confirmHour < 1) {
				console.log('当天可能已经预约完，请重新选择明天时间段');
				this.$Message.info('当天可能已经预约完，请重新选择明天时间段');
				this.confirmInfo= {
					startYear: '',
					startDate: '',
					defaultHourStart: '',
					defaultHourEnd: '',
					hour: 0,
					discountAmount: 0,
					totalPrice: 0
				}
				return
			} else {
				this.confirmInfo.startDate = this.selectOptions.startDate; // '2022-01-07',
				this.confirmInfo.hour = confirmHour;
				var totalPrice = 0;
				for (let i = 0; i < this.selectOptions.defaultHourList.length; i++) {
					var item = this.selectOptions.defaultHourList[i];
					if (item.selected) {
						var hourPrice = this.getPrice(item.hour);
						totalPrice = totalPrice / 1 + hourPrice / 1;
					}
				}
				//如果当前不是套餐模式
				if ((this.curIndex === 0 && this.roomConfig.priceMode === 2) || this.roomConfig.priceMode === 0) {
					this.confirmInfo.totalPrice = (this.confirmInfo.hour * (this.roomConfig.price / 100)).toFixed(2);
					console.log(this.roomConfig);
					
					console.log('当天可能已经预约完，请重新选择明天时间段123123213');
				}

				this.confirmInfo.discountAmount =
					this.confirmInfo.totalPrice > 0 ? (this.confirmInfo.totalPrice - totalPrice / 1).toFixed(2) : 0;
				console.log('totalPrice', totalPrice);
				console.log('this.confirmInfo.totalPrice', this.confirmInfo.totalPrice);
				console.log('this.confirmInfo.discountAmount', this.confirmInfo.discountAmount);
				this.showDetail = false;
			}
			
			this.confirmInfo.hour = confirmHour;
			if (this.confirmInfo.defaultHourEnd) {
				this.confirmInfo.defaultHourEnd = this.thirtyMinAfter(this.confirmInfo.defaultHourEnd);
			}
			if (this.selectedCoupon) {
				this.selectCoupon(this.selectedCoupon);
			}
			if(this.orderHour<2){
				this.$Message.info('预约时间最少两个小时');
				return
			}
			
		},
		//往后30分钟
		thirtyMinAfter(time) {
			if (!time) {
				return time;
			}
			var hour = parseInt(time.split(' ')[1].split(':')[0]);
			var min = time.split(' ')[1].split(':')[1];

			if (hour <= 23 && min == '00') {
				return time.split(' ')[0] + ' ' + hour + ':' + '30';
			}
			if (hour <= 23 && min == '30') {
				return time.split(' ')[0] + ' ' + (hour + 1) + ':' + '00';
			}
			return time;
		},
		onDateConfirm(day) {
			this.selectOptions.startDate = day.result;
			this.getCurrentDate(day.result);
		},
		selectCustomDay() {
			this.$refs.date.show();
		},
		quickSelectHour(timeLong, itemIndex) {
			console.log(timeLong, itemIndex,98777);
			this.curHourIndex = itemIndex;
			var index = timeLong * 2;
			var count = timeLong * 2;
			this.confirmInfo.defaultHourStart = '';
			this.selectOptions.defaultHourList.forEach((item) => {
				item.selected = false;
				if (!item.pass && !item.disabled && index == count) {
					this.selectHour(item);
					index--;
				} else if (index < count && index > 1) {
					index--;
				} else if (index == 1) {
					this.selectHour(item);
					index--;
				}
			});
			this.confirmSelect();
			if (this.selectedCoupon) {
				this.selectCoupon(this.selectedCoupon);
			}
		},
		selectHour(defaultHour) {
			console.log('selectHour:===================================');
			console.log(defaultHour);
			// defaultHour.selected = !defaultHour.selected
			let page = this;
			var startTimeFLag = false; //是否在设置起始时间
			if (!page.confirmInfo.defaultHourStart) {
				// 当前defaultHourStart为空代表在设置起始时间
				page.confirmInfo.defaultHourStart = defaultHour.day + ' ' + defaultHour.hour;
				page.confirmInfo.defaultHourEnd = '';
				startTimeFLag = true;
			} else {
				//如果当前选择时间等于起始时间，即为双击起始时间，则清除所有已选择
				if (page.confirmInfo.defaultHourStart === defaultHour.day + ' ' + defaultHour.hour) {
					page.confirmInfo.defaultHourStart = '';
					page.selectOptions.defaultHourList.forEach(function (item) {
						item.selected = false;
					});
					this.orderHour = this.calHour();
					return;
				}
				if (
					util.compareDatesMMDDHHmm(
						page.confirmInfo.defaultHourStart,
						defaultHour.day + ' ' + defaultHour.hour
					) > 0
				) {
					this.$Message.info('截止时间不能小于起始时间');
					return;
				}
				page.confirmInfo.defaultHourEnd = defaultHour.day + ' ' + defaultHour.hour;
			}

			//如果不是在设置起始时间并且当前设置的时间和起始时间又是相同的，那么清除起始时间
			if (!startTimeFLag && this.confirmInfo.defaultHourStart == defaultHour.day + ' ' + defaultHour.hour) {
				page.selectOptions.defaultHourList.forEach(function (item) {
					item.selected = false;
				});
				page.confirmInfo.defaultHourStart = '';
			}
			var startFlag = false;
			var endFlag = false;
			page.selectOptions.defaultHourList.forEach(function (item) {
				item.selected = false;
				var itemTime = item.day + ' ' + item.hour;
				if (page.confirmInfo.defaultHourStart == itemTime) {
					startFlag = true;
					item.selected = true;
					console.log('page.confirmInfo.itemTime:' + itemTime);
				}
				if (page.confirmInfo.defaultHourEnd == itemTime) {
					endFlag = true;
					item.selected = true;
				}

				if (!startTimeFLag && startFlag && !endFlag) {
					item.selected = true;
				}
			});

			this.orderHour = this.calHour();
		},
		calHour(dateType = 'select') {
			//计算预约了多少个小时
			var count = 1;
			var day = '';
			var dayCount = 0;
			this.selectOptions.defaultHourList.forEach(function (item) {
				if (item.selected && day == '') {
					day = item.day;
					dayCount++;
				}

				if (item.selected && day != item.day) {
					console.log('day======================' + day);
					dayCount++;
					day = item.day;
				}
				if (item.selected) {
					console.log(
						'=========================================item.hour============================================='
					);
					// console.log(item.hour);
					count++;
				}
			});
			console.log('dayCount=' + dayCount);
			return count > 0 ? (count - 1) / 2 : 0;
		},

		selectDay(defaultItem, index) {
			console.log(defaultItem, index,'defaultItem, index');
			this.curDateIndex = index;
			this.defaultItem = defaultItem;
			if (!index || index === 0) {
				this.currentStartHour = this.currentHour;
			} else {
				this.currentStartHour = '0';
			}
			let page = this;
			var day = defaultItem.day;
			// 选中某一天时，切换已选择
			if (defaultItem && defaultItem.dayYmd) {
				this.currentYearMonthDay = defaultItem.dayYmd;
				if (
					this.selectedStartDate &&
					this.setedStartIndex !== -1 &&
					this.selectOptions.defaultOnlyHourList[this.setedStartIndex]
				) {
					// this.selectedStartDate = util.replaceDatePart(this.selectedStartDate, defaultItem.dayYmd)
					this.selectedStartDate = this.selectOptions.defaultOnlyHourList[this.setedStartIndex].dayYmdhm;
				}
			}
			// 查询预订情况
			this.$api
				.post('/roomOrder/bookingDetail', {
					roomId: this.roomId,
					day: defaultItem.year + '-' + day
				})
				.then((response) => {
					if (response.ret === 1) {
						this.confirmInfo.startYear = defaultItem.year;
						this.roomUsingEndTime = response.data.endTime;
						this.roomUsingStatus = response.data.roomUsingStatus;
						this.roomOrderTimes = response.data.roomOrderTimes;
						for (let i = 0; i < this.selectOptions.defaultDayList.length; i++) {
							this.selectOptions.defaultDayList[i].selected = false;
						}
						this.selectOptions.startDate = defaultItem.day;
						defaultItem.selected = true;
						console.log('confirmHour',' confirmHour');
						this.selectOptions.defaultHourStart = '';
						this.selectOptions.defaultHourEnd = '';
						this.checkCurrentHour();

						for (let i = 0; i < this.selectOptions.defaultHourList.length; i++) {
							this.selectOptions.defaultHourList[i].disabled = false;
							let hour = this.selectOptions.defaultHourList[i].hour;
							let itemDay = this.selectOptions.defaultHourList[i].day;
							let intHour = parseInt(hour.split(':')[0]) * 60 + parseInt(hour.split(':')[1]);

							//过滤hour
							if (day != itemDay || intHour < this.maxHour) {
								this.selectOptions.defaultHourList[i].pass = true;
							} else {
								this.selectOptions.defaultHourList[i].pass = false;
							}
						}
						// this.orderHour = this.calHour();
						this.selectOptions.defaultHourList.forEach(function (item) {
							response.data.bookingTimeArry.forEach(function (bookingTime) {
								page.bookedTimeJson[bookingTime] = false;
								day = day.replace('月', '-').replace('日', '');
								// console.log(day)
								// console.log(bookingTime)
								// console.log(defaultItem.year + "-" + day.replace("月", "-").replace("日", "") + " " + item.hour)
								if (
									bookingTime ==
									defaultItem.year + '-' + day.replace('月', '-').replace('日', '') + ' ' + item.hour
								) {
									item.disabled = true;
									page.bookedTimeJson[bookingTime] = true;
								}
							});
						});

						// 以小时为单位
						for (let i = 0; i < this.selectOptions.defaultOnlyHourList.length; i++) {
							//
							response.data.bookingTimeArry.forEach(function (bookingTime) {
								day = day.replace('月', '-').replace('日', '');
								if (
									bookingTime ==
									defaultItem.year +
										'-' +
										day.replace('月', '-').replace('日', '') +
										' ' +
										page.selectOptions.defaultOnlyHourList[i].hour
								) {
									page.selectOptions.defaultOnlyHourList[i].disabled = 2;
								}
							});
							if (i < this.currentHourNumber) {
								//第一天小于当前时间则不可选   0空闲，1不可用，2当前已选
								this.selectOptions.defaultOnlyHourList[i].disabled = 1;
							} else {
								this.selectOptions.defaultOnlyHourList[i].disabled = 0;
							}
							let hour1 = this.selectOptions.defaultOnlyHourList[i].hour;
							let itemDay = this.selectOptions.defaultOnlyHourList[i].day;
							let intHour = parseInt(hour1) * 60;
							//过滤hour
							if (day != itemDay || intHour < this.maxHour) {
								this.selectOptions.defaultOnlyHourList[i].pass = true;
							} else {
								this.selectOptions.defaultOnlyHourList[i].pass = false;
							}
						}
						this.selectOptions.defaultOnlyHourList.forEach(function (item) {
							response.data.bookingTimeArry.forEach(function (bookingTime) {
								page.bookedTimeJson[bookingTime] = false;
								day = item.day.replace('月', '-').replace('日', '');
								// console.log('defaultOnlyHourList day', day)
								// console.log('defaultOnlyHourList bookingTime', bookingTime)
								// console.log('defaultOnlyHourList defaultItem', defaultItem.year + "-" + day.replace("月", "-").replace("日", "") + " " + item.hour)

								if (
									bookingTime.split(':')[0] ===
									defaultItem.year + '-' + day.replace('月', '-').replace('日', '') + ' ' + item.hour
								) {
									item.disabled = 1;
									page.bookedTimeJson[bookingTime] = true;
								}
							});
						});

						let confirmHour = this.calTodayRemainHour(this.selectOptions.defaultHourList);
						console.log('confirmHour', confirmHour);
						if (confirmHour < 1) {
							console.log('当天已订完，为您切换至明天123');
							console.log('当天已订完，为您切换至明天');
							this.selectDay(this.selectOptions.defaultDayList[1], 1);
						}
						//如果当前是套餐模式
						if (
							(this.curIndex === 1 && this.roomConfig.priceMode === 2) ||
							this.roomConfig.priceMode === 1
						) {
							this.setedStartIndex = util.setConsecutiveArrays(
								this.selectOptions.defaultOnlyHourList,
								this.youCanBookingHourIndex,
								this.confirmInfo.hour
							);
							if (this.curDateIndex === 0 && this.setedStartIndex === this.currentHourNumber) {
								//如果是今天，则起始时间设为当前时间或可连续订购套餐的时间
								this.selectedStartDate = this.currentDateTime;
							} else if (
								this.setedStartIndex !== -1 &&
								this.selectOptions.defaultOnlyHourList[this.setedStartIndex]
							) {
								this.selectedStartDate =
									this.selectOptions.defaultOnlyHourList[this.setedStartIndex].dayYmdhm;
							}
						}else{
							console.log('当天已订完，为您切换至明天');
							this.quickSelectHour(2, 0);
						}
						
					} else {
						this.$Message.error(response.msg);
					}
				});
		},
		getCurrentDate(startDate = '') {
			this.selectOptions.defaultHourList=[]
			this.selectOptions.defaultDayList=[]
			this.selectOptions.defaultOnlyHourList=[]
			
			//获取当前日期，还有后两天日期数据
			let startTime = parseInt(new Date().valueOf() / 1000);
			console.log(startTime,99888);
			if (startDate) {
				startTime = parseInt(new Date(startDate).valueOf() / 1000);
			}
			let startTimeNext01 = startTime + 24 * 3600;
			let startTimeNext02 = startTime + 24 * 3600 * 2;
			let startWeekLabel = this.getWeekDate(startTime);
			let startWeekLabel01 = this.getWeekDate(startTimeNext01);
			let startWeekLabel02 = this.getWeekDate(startTimeNext02);

			let startDateLabel = this.timeToDay(startTime);
			let startDateLabel01 = this.timeToDay(startTimeNext01);
			let startDateLabel02 = this.timeToDay(startTimeNext02);

			let startDateYMDLabel = this.timeToDayYMD(startTime);
			let startDateYMDLabel01 = this.timeToDayYMD(startTimeNext01);
			let startDateYMDLabel02 = this.timeToDayYMD(startTimeNext02);
			this.selectOptions.defaultDayList.splice(0, 5);
			//默认显示五天的预订
			for (let i = 0; i < 5; i++) {
				let startTimeNext = startTime + 24 * 3600 * i;
				let startWeekNextLabel = this.getWeekDate(startTimeNext);
				let startDateNextLabel = this.timeToDay(startTimeNext);
				let startDateNextYMDLabel = this.timeToDayYMD(startTimeNext);
				let item = {
					year: this.timeToYear(startTimeNext),
					day: startDateNextLabel,
					dayYmd: startDateNextYMDLabel,
					week: startWeekNextLabel,
					selected: false
				};
				this.selectOptions.defaultDayList.push(item);
				
				this.generateHours(startDateNextLabel, startDateNextYMDLabel);
				this.generateOneHours(startDateNextLabel, startDateNextYMDLabel);
			}
			
			console.log(this.selectOptions,9654);
			// this.selectDay(this.selectOptions.defaultDayList[0], 0);
			// this.initHours(startDateLabel, startDateLabel01, startDateLabel02);
		},

		generateHours(day, dayYmd) {
			var currMin = '00';
			var hour;
			for (var i = 0; i < 48; i++) {
				hour = Math.trunc(i / 2);
				/*if(hour == 24) {
          // 666666666666666666666
          hour = 0;
        }*/
				if (hour < 10) {
					hour = '0' + hour;
				}
				this.selectOptions.defaultHourList.push({
					day: day,
					dayYmd: dayYmd,
					dayYmdhm: dayYmd + ' ' + hour + ':' + currMin,
					hour: hour + ':' + currMin,
					disabled: false,
					pass: false,
					selected: false
				});
				if (currMin == '00') {
					currMin = '30';
				} else {
					currMin = '00';
				}
			}
		},

		generateOneHours(day, dayYmd) {
			var hour;
			for (var i = 0; i < 24; i++) {
				hour = Math.trunc(i);
				if (hour < 10) {
					hour = '0' + hour;
				}
				this.selectOptions.defaultOnlyHourList.push({
					day: day,
					dayYmd: dayYmd,
					dayYmdhm: dayYmd + ' ' + hour + ':00',
					hour: hour,
					disabled: 0,
					pass: false,
					selected: false
				});
			}
		},

		timeToDay(timestamp) {
			var re = /^[0-9]+$/;
			if (!re.test(timestamp)) {
				return timestamp;
			}
			var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
			var D = date.getDate() < 10 ? '0' + date.getDate() + '日' : date.getDate() + '日';
			return M + D;
		},

		timeToDayMD(timestamp) {
			var re = /^[0-9]+$/;
			if (!re.test(timestamp)) {
				return timestamp;
			}
			var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			return M + D;
		},
		timeToDayYMD(timestamp) {
			var re = /^[0-9]+$/;
			if (!re.test(timestamp)) {
				return timestamp;
			}
			var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			return date.getFullYear() + '-' + M + D;
		},
		timeToDayYMDHM(timestamp) {
			var re = /^[0-9]+$/;
			if (!re.test(timestamp)) {
				return timestamp;
			}
			var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			var HH = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			var mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			return date.getFullYear() + '-' + M + D + ' ' + HH + ':' + mm;
		},
		timeToYear(timestamp) {
			var re = /^[0-9]+$/;
			if (!re.test(timestamp)) {
				return timestamp;
			}
			var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			return date.getFullYear();
		},
		DatePicker(type) {
			//显示
			this.type = type;
			this.showPicker = true;
			this.value = this[type];
		},
		ed(e) {
			//选择
			this.showPicker = false;
			if (e) {
				this[this.type] = e.value;
			}
		},
		getRoomDetail(id) {
			this.$api
				.post('/room/getById', {
					roomId: id
				})
				.then((response) => {
					console.log('=======================函数1=====================================');
					if (response.ret === 1) {
						this.room = response.data;
					} else {
						this.$Message.error(response.msg);
					}
					this.getRoomConfig(this.roomId);
				});
		},
		// 获取套餐列表
		getRoomConfig(id) {
			let page = this;
			this.$api
				.post('/roomConfig/getById', {
					roomId: id
				})
				.then((response) => {
					console.log('=======================函数2=====================================');
					if (response.ret === 1) {
						if (response.data) {
							this.roomConfig = response.data;
							this.selectDay(this.selectOptions.defaultDayList[0], 0);
							if (this.roomConfig.timeIntervalDiscount) {
								var timeIntervalDiscount = JSON.parse(this.roomConfig.timeIntervalDiscount);
								timeIntervalDiscount.forEach(function (item) {
									page.timeIntervalDiscountJSON[item.time] = item;
								});
								console.log(timeIntervalDiscount);
								console.log(page.timeIntervalDiscountJSON);
							}
							if (
								(this.roomConfig.priceMode === 1 || this.roomConfig.priceMode === 2) &&
								!this.roomConfig.roomPackages
							) {
								this.$Message.error('当前包间不可用');
							}
						} else {
							this.roomConfig.price = 2000;
						}
					} else {
						this.$Message.error(response.msg);
					}
					this.getCardAndVoucher();
				});
		},
		calTodayRemainHour(defaultHourList) {
			
			let count = 0;
			let i = 0;
			defaultHourList.forEach((item) => {
				i++;
				// console.log(item.hour);
				if (!item.disabled) {
					count++;
				}
				if (i >= 48) {
					return count;
				}
			});
			return count;
		}
	}
};
</script>

<style lang="scss">
.schedule-container {
	background-color: #f5f4f8;
	color: #000000;
	padding-bottom: 150upx;
	font-size: 32upx;
	overflow: hidden;

	.scene-confirm-form {
		padding: 20upx;

		.form-item {
			margin-top: 20upx;
			display: flex;
			.form-title {
				margin-right: 20upx;
			}
			.form-value {
				flex: 1;
			}
		}
	}

	.background-fix {
		background-color: black;
		opacity: 0.8;
		width: 100%;
		height: 100%;
		z-index: 10;
		position: fixed;
		top: 0;
		left: 0;
	}

	.quick-select {
		display: flex;
		text-align: center;
		margin: 0 auto 20rpx auto;
	}

	.quick-select-btn {
		width: 33%;
		border: 1px solid #d0d3de;
		margin: 0 20rpx;
		padding: 10rpx 0;
		border-radius: 10rpx;
	}

	.appointment-select {
		/*display: none;*/
		position: fixed;
		bottom: 0;
		z-index: 1000;
		height: 1080upx;
		width: 750upx;
		left: 0;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		//border-top-left-radius: 20upx;
		//border-top-right-radius: 20upx;
		.notice-title {
			display: flex;
			justify-content: center;
			align-items: center;
			color: $uni-theme-color;
			font-size: 32rpx;
		}
		.notice-tip {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20upx;
			background: #f5f6fb;
			color: #1d2c6d;
			font-weight: 500;
			.notice-image {
				width: 50upx;
				height: 55upx;
				margin-right: 10upx;
			}
		}

		.hour-tip-flex-box1 {
			display: flex;
			padding: 20upx;
			justify-content: space-between;
			align-items: center;
			.hour-tip-info1 {
				display: flex;
				.hour-tip-item1 {
					display: flex;
					align-items: center;
					margin-right: 10px;
					font-size: 20rpx;
					.hour-square1 {
						width: 20rpx;
						height: 20rpx;
						background-color: #d8d8d8;
						border-radius: 2px;
						margin-right: 14rpx;
					}
					.hour-square-blue1 {
						width: 20rpx;
						height: 20rpx;
						// background-color: $uni-theme-color;
						background-color: $uni-theme-color;
						border-radius: 2px;
						margin-right: 14rpx;
					}
					.hour-square-blue2 {
						width: 20rpx;
						height: 20rpx;
						// background-color: $uni-theme-color;
						background-color: #999;
						border-radius: 2px;
						margin-right: 14rpx;
					}
					.hour-num1 {
						word-wrap: break-word;
						word-break: keep-all;
						font-size: 18upx;
						width: 14px;
						text-align: center;
					}
				}
			}
			.booking-btn {
				color: #000;
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.date-select {
			display: flex;
			margin: 0 0 20upx 0;
			font-size: 28upx;
			border-radius: 20upx;
			background-color: #fff;
			.date-select-item {
				flex: 1;
				height: 120upx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 24rpx;
				color: #9e9e9e;
				/*
        color:white;
        color:#999;*/
				&.current {
					// background-color: #1D2C6D;
					background-color: $uni-theme-color;
					border-radius: 10upx;
					color: white;
				}

				.month {
				}
				.week {
				}
				.cal-image {
					width: 30upx;
					height: 30upx;
				}
			}
		}
		.hours {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 28upx;
			overflow-y: scroll;
			height: 550upx;
			.hour {
				text-align: center;
				margin-bottom: 20upx;
				border-radius: 10upx;
				background-color: #d8d8d8;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100upx;
				width: 160upx;
				&.current {
					// background-color: #1D2C6D;
					background-color: $uni-theme-color;
					color: white;
				}
			}
		}
		.select-buttons {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 120upx;
			background-color: white;
			border-top: 1upx solid #eee;
			width: 100%;
			.close-button {
				width: 250upx;
				border-radius: 30upx;
				background-color: #d0d3de;
				padding: 20upx;
				text-align: center;
				margin-left: 10upx;
			}
			.confirm-button {
				width: 250upx;
				border-radius: 30upx;
				// background-color: #1D2C6D;
				background-color: $uni-theme-color;
				color: white;
				padding: 20upx;
				margin-left: 30upx;
				text-align: center;
			}
		}
	}

	.date-tip {
		background-color: #fff4e4;
		width: 550upx;
		margin: 0 auto;
		padding: 10upx;
		font-size: 28upx;
		text-align: center;
		margin-bottom: 10upx;
		margin-top: 10upx;
		color: #1d2c6d;
		position: relative;
		.triangle-down {
			width: 0;
			height: 0;
			border-left: 10upx solid transparent;
			border-right: 10upx solid transparent;
			border-top: 20upx solid #1d2c6d;
			position: absolute;
			right: 20upx;
			top: 20upx;
		}
	}
	.select-date {
		.head {
			display: flex;
			justify-content: center;
			align-items: center;
			.info {
				font-weight: bold;
				margin-left: 10upx;
			}
		}
	}
	.footModel{
		width: 100%;padding: 20rpx;box-sizing: border-box;
		.footModel-box{
			font-size: 24rpx;color: #666;
			.footModel-box-title{
				padding:0 0 20rpx 0;border-bottom: 1rpx solid #eee;font-weight: bold;text-align: center;font-size:30rpx;color: #000;
			}
			.footModel-box-name{
				padding-bottom: 10rpx;
			}
			.footModel-box-text{
				font-size: 24rpx;color: red;margin-bottom: 5rpx;
			}
			.footModel-btn{
				display: flex;align-items: center;justify-content: space-around;padding: 20rpx 0;
				.footModel-leftbtn{
					width: 40%;height: 60rpx;line-height: 60rpx;border-radius: 40rpx;text-align: center;border: 1rpx solid $uni-theme-color;color: $uni-theme-color;
				}
				.footModel-rightbtn{
					width: 40%;height: 60rpx;line-height: 60rpx;border-radius: 40rpx;text-align: center;color: #fff;background-color: $uni-theme-color;
				}
			}
		}
	}
	.buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100upx;
		background-color: white;
		width: 100%;
		display: flex;
		.price-info {
			flex: 1;
			display: flex;
			align-items: flex-end;
			line-height: 100upx;
			.price {
				font-size: 42upx;
				margin-left: 50upx;
				margin-top: 10upx;
			}
			.total-hours {
				font-size: 28upx;
			}
		}
		.button {
			width: 240upx;
			text-align: center;
			// background-color: #1D2C6D;
			background-color: $uni-theme-color;
			color: white;
			line-height: 100upx;
		}
	}
	.isOkRoom {
		color: green;
	}
	.submit-button {
		font-size: 30upx;
		/*margin:0 auto;*/
		background-color: #1d2c6d;
		color: white;
		width: 300upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
		margin-top: 20upx;
	}
	.tea-item {
		width: 94%;
		background-color: white;
		background-color: #f5f4f8;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		position: relative;
		padding: 20upx;
		.image {
		}
		.map-point {
			width: 120upx;
			height: 120upx;
			/*background-color: white;*/
			margin-right: 20upx;
		}
		.tea-house-info {
			width: 100%;
			height: 120upx;
			margin-top: -160upx;
			/*
      background-color: black;
      opacity: 0.5;
      */
			background-color: rgba(0, 0, 0, 0.5);
			padding: 20upx;
			color: white;
			font-size: 32upx;
			display: flex;
			.base-info {
				flex: 1;
			}
			.title {
				font-weight: bold;
			}
			.address {
			}
		}
		.map-item-info {
			display: flex;
			flex-direction: column;
			.map-info {
				text-align: center;
				font-size: 24upx;
				/*margin:0 auto;*/
				background-color: #1d2c6d;
				color: white;

				height: 45upx;
				text-align: center;
				line-height: 45upx;
			}
		}
		.content {
			flex: 1;
			.title {
				color: #1d2c6d;
				font-size: 32upx;
			}
		}
	}
	/*
  .info-item{
    background-color: white;
    display: flex;
    padding: 20upx;
    font-size:28upx;
    border-bottom: 1upx solid #eee;
    .icon{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .value{
      margin-left:20upx;
    }
  }*/
	.room-select {
		/*
    margin-left:38upx;
    margin-right:38upx;
    */
		margin-top: 40upx;
		.head {
			font-size: 32upx;
			text-indent: 20upx;
		}
		.items {
			background-color: white;
			.item {
				display: flex;
				padding: 20upx;
				margin-top: 20upx;
				.icon {
					width: 160upx;
					height: 160upx;
					margin-right: 20upx;
				}
				.info {
					flex: 1;
					margin-left: 20upx;
					font-size: 32upx;
					.name {
						font-size: 32upx;
						color: #4b4b4b;
						font-weight: bold;
					}
					.number {
						font-size: 28upx;
						color: #767676;
						margin-top: 10upx;
					}
					.desc {
						font-size: 28upx;
						color: #767676;
					}
				}

				.select-btn {
					display: none;
					background-color: #1d2c6d;
					color: white;
					width: 128upx;
					height: 69upx;
					line-height: 69upx;
					font-size: 28upx;
					text-align: center;
				}
				.no-select-btn {
					background-color: #eee;
				}
			}
		}
	}

	.coupon {
		width: 100%;
		height: 100%;
	}
	.coupon-box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: 0.3s;
		z-index: 999;
	}
	// 进入分享动画
	.coupon-show {
		transition: all 0.3s ease;
		transform: translateY(0%) !important;
	}
	// 离开分享动画
	.coupon-item {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		background-color: #ffffff;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 1999;
		.coupon-to {
			width: 100%;
			height: 3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			&::after {
				content: '';
				width: 240rpx;
				height: 0rpx;
				border-top: 1px solid #e4e7ed;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				margin-left: 30rpx;
			}
			&::before {
				content: '';
				width: 240rpx;
				height: 0rpx;
				border-top: 1px solid #e4e7ed;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				margin-right: 30rpx;
			}
		}
		.content {
			width: 100%;
			height: auto;
			flex-wrap: wrap;
			.block {
				height: 180rpx;
				display: flex;
				border-bottom: gainsboro 1px dashed;
				border-top: gainsboro 1px dashed;
				image {
					width: 80rpx;
					height: 80rpx;
					justify-content: center;
				}
				.coupon-desc {
					padding: 20rpx 30rpx;
					justify-content: center;
					margin-top: 16rpx;
					font-size: 28rpx;
					color: #606266;

					.coupon-name {
						display: inline-list-item;
						font-size: 32rpx;
						font-weight: bold;
					}

					.coupon-times {
						color: #1d2c6d;
						margin-top: 10rpx;
					}

					.coupon-used {
						color: orange;
						margin-left: 20rpx;
						margin-top: 10rpx;
					}

					.coupon-validity {
						display: inline-list-item;
						color: lightgrey;
						margin-top: 10rpx;
					}
				}
				.coupon-icon {
					margin-left: 36rpx;
					width: 160rpx;
					height: auto;
				}
			}
		}
		.cancel {
			width: 100%;
			height: 3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1rpx solid #e4e7ed;
		}
	}
	.header-bg {
		height: 160upx;
		// background: #1D2C6D;
		background: $uni-theme-color;
	}

	.header {
		width: 95%;
		padding: 20rpx;
		background: #fff;
		//padding: 12px;
		box-sizing: border-box;
		border-radius: 8px;
		margin: -150upx auto 0 auto;
		box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.1);
		.notice-wrap {
			display: flex;
			justify-content: space-between;
			// height: 300rpx;
			.left {
				width: 140rpx;
				height: 140rpx;
				overflow: hidden;
				border-radius: 8rpx;
				image {
					width: 140rpx;
					height: 140rpx;
				}
			}
			.right {
				flex: 1;
				padding-left: 20rpx;
				.title-wrap,
				.notice-desc-wrap {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 20rpx;
					.title {
						font-weight: bold;
						font-size: 28rpx;
						margin: 10rpx 0 20rpx;
					}
					.name {
						font-size: 24rpx;
						color: #898989;
					}
					.status {
						border-radius: 3px;
						border: 1px solid #f00;
						font-size: 11px;
						padding: 2px 4px;
						color: #f00;
					}
					.use-desc {
						color: #1d2c6d;
						font-size: 12px;
					}
				}
			}
		}
		.detail-desc {
			margin-top: 20rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #9e9e9e;
		}
	}
	.body {
		padding: 20rpx;
		.schedule-mode-wrap {
			border-radius: 8px;
			padding: 20rpx;
			box-sizing: border-box;
			overflow: hidden;
			background-color: #fff;
			.category {
				display: flex;
				background: #fff;
				// border-bottom: 1px solid $uni-theme-color;
				margin-bottom: 20rpx;
				.item {
					flex: 1;
					text-align: center;
					font-size: 16px;
					height: 32px;
					line-height: 32px;
					transition: all ease-in 0.3s;
					box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
					border-radius: 5rpx;
					&.actived {
						color: #fff;
						// background: #1D2C6D;
						background: $uni-theme-color;
					}
				}
			}
			.category-title {
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
			}
			.category-detail {
				// border: 1px solid #1D2C6D;
				// border: 1px solid $uni-theme-color;
				border-bottom-left-radius: 8px;
				border-bottom-right-radius: 8px;
				border-top-color: transparent;
				position: relative;
				background: #fff;
				// box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
				.select-warp {
				}
				.label {
					color: #333;
					font-size: 13px;
					font-weight: 500;
				}

				/*套餐模式*/
				.product-list {
					margin-top: 10px;
					margin-bottom: 10px;
					font-size: 24rpx;
				}
				.product-item {
					position: relative;
					background-color: #f0f0f0;
					border: 1px solid #ccc;
					border-radius: 5px;
					overflow: hidden;
					cursor: pointer;
					transition: background-color 0.3s ease;
					color: #333;
				}
				.product-item.selected {
					border: 1px solid $uni-theme-color;
				}
				.product-item.selected .product-bottom {
					max-height: 100px; /* 根据内容多少调整 */
					background-color: #e8e4f3; /* 选中时的背景颜色 */
					font-size: 24rpx;
				}
				.product-item.selected .product-top {
					background-color: #e8e4f3; /* 选中时的背景颜色 */
					border-bottom: 1px solid $uni-theme-color;
				}
				.product-item.selected .product-top .product-name {
					color: $uni-theme-color;
				}
				.product-item.selected .product-top .product-price {
					color: #e80808;
				}
				.product-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10px;
					//border-bottom: 1px solid #ddd; /* 分割线 */
				}
				.product-bottom {
					padding: 10px;
					background-color: #eee;
					transition: max-height 0.5s ease-in-out;
					overflow: hidden;
				}
				/* 隐藏底部详情，但保留空间以便平滑过渡 */
				.product-bottom[v-cloak] {
					max-height: 0;
				}
				.price-container {
					display: flex;
					align-items: center;
				}
				.minus-btn {
					margin: 0 5px;
					background-color: #e8f3ef;
					cursor: pointer;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 50rpx;
					border-radius: 20rpx;
				}
				.plus-btn {
					margin: 0 5px;
					background-color: $uni-theme-color;
					color: #fff;
					cursor: pointer;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 50rpx;
					border-radius: 20rpx;
				}
				.summary {
					margin: 20rpx 0;
					padding: 1px;
					background-color: #f8f9fa; /* 浅灰色背景 */
					border-radius: 5px;
				}
				.summary-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 5px;
				}
				.summary-label {
					font-size: 28rpx;
					font-weight: bold;
				}
				.summary-quantity {
					display: flex;
					padding: 8px;
					justify-content: space-between;
					align-items: center;
				}
				.summary-count {
					margin: 0 5px;
				}
				.summary-total {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: bold;
				}
				.summary-total-price {
					color: #333;
				}
				.picker {
					background-color: #fff;
					display: flex;
					justify-content: space-between;
					padding: 0 30upx;
					color: #8f8f94;
				}
				//button {
				//  padding: 5px 10px;
				//  background-color: #4CAF50; /* 绿色 */
				//  color: white;
				//  border: none;
				//  border-radius: 3px;
				//  cursor: pointer;
				//}
				//button:hover {
				//  background-color: #45a049; /* 深一点的绿色 */
				//}
			}

			button {
				margin-left: 10px;
			}
			.date-picker {
				display: flex;
				justify-content: space-between;
				.date-item {
					padding: 4px 12px;
					font-size: 12px;
					text-align: center;
					transition: all ease-in 0.2s;
					border-radius: 3px;
					border: 1px solid;
					border-color: transparent;
					color: #9e9e9e;
					&.actived {
						// color: #1D2C6D;
						color: $uni-theme-color;
						// border-color: #1D2C6D;
						border-color: $uni-theme-color;
						background: #e8f7e8;
					}
				}
			}
			.hour-picker {
				display: flex;
				align-items: center;
				padding-top: 16px;
				.hour-wrap {
					flex: 1;
					display: flex;
					justify-content: space-around;
					// padding-left: 10px;
					font-weight: bold;
				}
				.hour-item {
					transition: all ease-in 0.2s;
					font-size: 12px;
					border-radius: 3px;
					padding: 4px 8px;
					border: 1px solid;
					border-color: #ddd;
					color: #9e9e9e;
					&.actived {
						// background: #1D2C6D;
						background: $uni-theme-color;
						color: #ffffff;
						// border-color: #1D2C6D;
						border-color: $uni-theme-color;
					}
				}
			}
			.time-picker {
				display: flex;
				align-items: center;
				padding: 16px 0;
				.label {
					margin-right: 20rpx;
				}
				.time-wrap {
					flex: 1;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.time-item {
						text-align: center;
						border: 1px solid;
						width: 240rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-color: #ddd;
						border-radius: 10rpx;
						color: #333333;
						font-size: 28rpx;
					}
				}
			}
			.progress-bar-container {
				display: flex;
				width: 100%;
				border-radius: 5px;
				overflow: hidden;
				background-color: $uni-theme-color;
				color: #fff;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
			}
			.progress-bar-completed {
				text-align: center;
				// width: 30%; /* Adjust this to change the progress */
			}
			.progress-bar-remaining {
				text-align: center;
			}
			.progress-text {
				font-size: 12px;
			}
			.confirm-tip {
				font-size: 12px;
				font-weight: 300;
				padding: 6px 6px 0;
				border-top: 1px solid #b7d8b9;
				line-height: 1.5;
			}
		}
		.spare-time-wrap {
			border-radius: 8px;
			overflow: hidden;
			.spare-time {
				background: #fff;
				padding: 0 12px;
			}
			.block {
				width: 12px;
				height: 12px;
				background: #1d2c6d;
				border-radius: 2px;
				margin-right: 4px;
				border: 1px solid #ddd;
			}
			.top {
				display: flex;
				justify-content: space-between;
				font-size: 13px;
				padding: 18px 8px 0;
			}
			.block-item {
				display: flex;
				align-items: center;
			}
			.middle {
				padding-top: 12px;
				.block {
					width: 10px;
					height: 10px;
					margin-right: 0;
					background: #fff;
				}
				.spare-time-map {
					padding-bottom: 12px;
				}
				.date {
					color: #333;
					font-size: 11px;
					font-weight: 300;
					padding-bottom: 2px;
				}
				.map {
					flex: 1;
					text-align: center;
				}
				.map-wrap {
					display: flex;
					justify-content: space-between;
				}
				.number {
					font-size: 9px;
					font-weight: 400;
					color: #000;
				}
			}
		}

		.order-detail-wrap {
			border-radius: 8px;
			overflow: hidden;
			margin-top: 20upx;
			.spare-time {
				background: #fff;
				padding: 0 12px;
			}
			.title-wrap {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				line-height: 48rpx;
				border-bottom: 1px solid #f0f0ee;
				.title {
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
				}
				.total-price {
					border-radius: 3px;
					font-size: 14px;
					padding: 2px 4px;
					color: #f00;
					font-weight: bold;
				}
				.use-desc {
					color: #1d2c6d;
					font-size: 12px;
				}
			}

			.order-info-field {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 0;
				line-height: 40rpx;
				.title {
					font-size: 13px;
				}
				.info {
					border-radius: 3px;
					font-size: 13px;
					padding: 2px 4px;
				}
			}
		}
		.hour-flex-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-top: 10upx;
			overflow: auto;
			&::-webkit-scrollbar {
				display: none;
			}
			.checked {
				background-color: #204ca2 !important;
			}
			.hour-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				.hour-square {
					width: 20rpx;
					height: 20rpx;
					background-color: #f0f3fd;
					border-radius: 2px;
				}
				.hour-square-red {
					width: 20rpx;
					height: 20rpx;
					// background-color: #1D2C6D;
					background-color: #f00;
					border-radius: 2px;
				}
				.hour-square-blue {
					width: 20rpx;
					height: 20rpx;
					// background-color: #1D2C6D;
					background-color: $uni-theme-color;
					border-radius: 2px;
				}
				.hour-num {
					word-wrap: break-word;
					word-break: keep-all;
					font-size: 18upx;
					width: 14px;
					text-align: center;
				}
			}
		}
		.hour-tip-flex-box {
			display: flex;
			padding: 20upx 0;
			font-size: 24rpx;
			.checked {
				background-color: #204ca2 !important;
			}
			.hour-tip-item {
				display: flex;
				// flex-direction: column;
				align-items: center;
				margin-right: 5px;
				.hour-square {
					width: 20rpx;
					height: 20rpx;
					background-color: #f0f3fd;
					border-radius: 2px;
					margin-right: 5px;
				}
				.hour-square-red {
					width: 20rpx;
					height: 20rpx;
					// background-color: $uni-theme-color;
					background-color: #f00;
					border-radius: 2px;
					margin-right: 5px;
				}
				.hour-square-blue {
					width: 20rpx;
					height: 20rpx;
					// background-color: $uni-theme-color;
					background-color: $uni-theme-color;
					border-radius: 2px;
					margin-right: 5px;
				}
				.hour-num {
					word-wrap: break-word;
					word-break: keep-all;
					font-size: 18upx;
					width: 20rpx;
					height: 28rpx;
					text-align: center;
				}
			}
		}
	}
}
</style>
